// form item
import { v4 as uuidv4 } from "uuid";

const mock_item = {
  label: "路由名称",
  type: "list",
  data: "router.name", // 从 router 表中获取所有的 name
  placeholder: "请选择路由名称",
  required: true,
  defaultValue: "",
};

const TextItem = ({ item, formName }) => {
  return (
    <div>
      <label
        className="mb-2 block text-sm font-bold text-gray-700"
        htmlFor="text-box"
      >
        {item.label}
      </label>
      <label
        className="input input-bordered flex items-center gap-2"
        name="router_input_label"
      >
        <input
          className="grow"
          name={formName}
          type="text"
          placeholder={item.placeholder}
          defaultValue={item.defaultValue}
        />
        {item.required && (
          <p className="badge badge-primary">
            <span className="text-md mr-1 mt-1">*</span>
            <span className="text-sm">必填</span>
          </p>
        )}
      </label>
    </div>
  );
};

const ListItem = ({ label, list, formName }) => {
  return (
    <div>
      <label
        className="mb-2 block text-sm font-bold text-gray-700"
        htmlFor="select-box"
      >
        {label}
      </label>
      <div className="">
        <select
          id="router-list"
          name={formName} // 这里 formName 和 formData 绑定
          className="select select-bordered w-full max-w-xl"
        >
          {list &&
            list.map((item) => (
              <option key={uuidv4()} value={item.name}>
                {item.name}
              </option>
            ))}
        </select>
      </div>
    </div>
  );
};

export { TextItem, ListItem };
